<template>
  <div class="box1">
    <el-header>
      <div class="outer">
        <div class="inner-left">
          <div class="tous">
            <div class="head">
              <img src="../assets/zxwy.png" />
            </div>
            <div class="head-top">欢迎！</div>
            <div class="head-botton">智学商城-后台管理系统</div>
          </div>
        </div>
        <div class="inner-right">
          <div class="title">登录</div>
          <el-form
            status-icon
            :rules="rules"
            class="rows"
          >
            <el-form-item prop="username">
              <el-input
                v-model="username"
                type="text"
                autocomplete="off"
                placeholder="用户名"
                :prefix-icon="Avatar"
              />
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                v-model="password"
                type="password"
                autocomplete="off"
                placeholder="密码"
                :prefix-icon="Lock"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm" class="logins"
                >登录</el-button
              >
              
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-header>
  </div>
</template>

<script>
import { reactive } from "vue";
import { Avatar, Lock } from "@element-plus/icons-vue"; //引用图标
import axios from "axios";
import QS from "qs"; //创建文件自带插件，可以直接引用(转型)
import router from "@/router";
import { ElMessage as $msg, ElMessage } from "element-plus"; //将ElMessage转义$msg
import Cookies from "js-cookie"; //引用cookies
import http from '@/http';
import { mapActions, mapMutations ,mapGetters} from 'vuex';

export default {
  name: "Login",
  components: {},
  data() {
    return {
      username:"",
      password:"",
      // getInformation:{

      // }
    }
  },
  setup(){
    return{
      Avatar,
      Lock
    }
  },
  // computed:{
  //   ...mapGetters(['information']),
  // },
  methods: {
    // ...mapActions(['getInformation']),

    submitForm(){
        if (this.username == "") {
          $msg.success("用户名不能为空!");
          return;
        }
        if (this.password == "") {
          $msg.success("密码不能为空!");
          return;
        }
        let data = {
          _gp: "admin",
          _mt: "login",
          username:this.username,
          password:this.password,
        }
        
      http.post(data).then((res)=>{
        // console.log(res);
          if (res.errno == 200) {
            this.$store.state.addusermodules.cunc = {username:this.username,password:this.password};
            // console.log(this.$store.state.addusermodules.cunc);
            var less = new Date();
            var minutes = 30;
            less.setTime(less.getTime() + minutes * 60 * 1000);
            Cookies.set("token",res.data, { expires: less });
            $msg.success({ message: "登录成功！" });
            //  //跳转到主页页面
            if(this.$route.query.transfer){
              this.$router.push(
                {
                  path:this.$route.query.transfer
                }
              )
            }else{
              this.$router.push({ path: "/Home/Mainpage" });
            }
          }else{
            ElMessage.error("管理员不存在")
          }
      })
      }
  },
};
</script>
<style lang="less" scoped>
body {
  margin: 0px;
  padding: 0px;
}
.box1 {
  width: 100%;
  height: 710px;

  .el-header {
    padding: 0px;
    width: 100%;
    height: 100%;
    background: url("@/assets/zhutu.jpg")repeat;
    background-size: cover;
    .outer {
      position: absolute;
      top: 0px;
      left: 0px;
      right: 0px;
      bottom: 0px;
      margin: auto;
      width: 600px;
      height: 330px;
      .inner-left {
        display: flex;
        justify-content: center ;
        align-items:center;
        width: 40%;
        height: 100%;
        background-color: #005de9;
        float: left;
        .tous {
          width: 180px;
          height: 180px;
          .head {
            height: 70px;
            width: 70px;
            margin: auto;
            border-radius: 50%;
            background-color: #0061dc;
            box-shadow: 6px -5px 20px 1px #fff;
            img {
              width: 65px;
              height: 65px;
              margin-left: 3px;
              margin-top: 4px;
            }
          }
          .head-top {
            text-align: center;
            height: 40px;
            line-height: 40px;
            width: 100%;
            color: #fff;
          }
          .head-botton {
            text-align: center;
            height: 30px;
            line-height: 30px;
            width: 100%;
            color: #fff;
          }
        }
      }
      .inner-right {
        width: 60%;
        height: 100%;
        background-color: floralwhite;
        float: left;
        .title {
          margin-top: 60px;
          width: 100%;
          height: 40px;
          line-height: 40px;
          text-align: center;
        }
        .rows {
          padding: 15px 30px;
        }
        .logins {
          width: 120px;
          margin-left: 90px;
        }
      }
    }
  }
}

</style>